<!-- 使用例子：
<u-sticky>
	<pb-search placeholder="请输入" :value="queryParams.keyword" @searchSubmit="onSearchSubmit"></pb-search>
</u-sticky>

onSearchSubmit(keyword){
	if(keyword!=this.queryParams.keyword){
		this.queryParams.keyword = keyword
		...调用接口搜索
	}
} -->

<template>
	<view class="pb-search" :style="customStyle">
		<u-search :placeholder="placeholder" :bgColor="inputBgColor" :searchIconColor="searchIconColor"
			:placeholderColor="placeholderColor" :searchIcon="searchIcon" searchIconSize="44rpx" :inputStyle="{'fontSize':'32rpx'}"
			height="64rpx" :color="inputColor" v-model="keyword" :disabled="disabled" :showAction="true" @blur="blur"
			:animation="true" @click="click">
			<template #uSearchClose>
				<u-icon name="close" size="22rpx" color="#ffffff" customStyle="line-height: 24rpx"></u-icon>
			</template>
		</u-search>

		<!-- 在PC端<u-search>的@click事件不生效 -->
		<template v-if="disabled">
			<view class="templateSearch" @click="click"></view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "pb-search",
		props: {
			placeholder: {
				type: String,
				default: "请输入搜索内容",
				require: false
			},
			value: {
				type: String,
				default: "",
				require: false
			},
			disabled: {
				type: Boolean,
				default: false,
				require: false
			},
			inputBgColor: {
				type: String,
				default: "#f2f2f2",
			},
			inputColor: {
				type: String,
				default: "#1E232B",
			},
			searchIconColor: {
				type: String,
				default: "#909399",
			},
			searchIcon: {
				type: String,
				default: "search",
			},
			placeholderColor: {
				type: String,
				default: "#909399",
			},
			customStyle: {
				type: String
			}
		},
		data() {
			return {
				keyword: this.value,
			};
		},
		options: {
			styleIsolation: 'shared' // 解除样式隔离(解决在子组件中使用deep修改第三方样式失效的问题)
		},
		methods: {
			blur(value) {
				setTimeout(() => {
					console.log('【pb-search】blur=>' + this.keyword)
					this.$emit("searchSubmit", this.keyword)
				}, 100)

			},
			click() {
				console.log('【pb-search】click=>')
				this.$emit("searchSubmit", '')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pb-search {
		background-color: white;
		padding: 24rpx 32rpx;
		box-shadow: 0 1rpx 1rpx 1rpx rgba(0, 0, 0, 0.05);
		position: relative;

		.templateSearch {
			position: absolute;
			top: 24rpx;
			left: 32rpx;
			bottom: 24rpx;
			right: 32rpx;
			z-index: 1;
			background-color: transparent;
		}
	}

	/* #ifdef H5 */
	
	/* #ifndef VUE3 */
	/deep/ .u-search__action--active {
		font-size: 32rpx !important;
		width: fit-content !important;
	}
	
	/deep/ .u-search__content__close {
		width: 32rpx;
		height: 32rpx;
	}
	/* #endif */
	/* #ifdef VUE3 */
	:deep(.u-search__action--active) {
		font-size: 32rpx !important;
		width: fit-content !important;
	}
	
	:deep(.u-search__content__close) {
		width: 32rpx;
		height: 32rpx;
	}
	/* #endif */
	

	/* #endif */
</style>